<a href="https://github.com/2fdevs/videogular/edit/master/app/scripts/com/2fdevs/videogular/controllers/vg-controller.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/2fdevs/videogular/blob/6f55d80/app/scripts/com/2fdevs/videogular/controllers/vg-controller.js#L70" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">vgController</code>
<div><span class="hint">controller in module <code ng:non-bindable="">com.2fdevs.videogular</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="com-2fdevs-videogular-controller-page com-2fdevs-videogular-controller-vgcontroller-page"><p>Videogular controller.
This controller offers a public API:</p>
<p>Methods</p>
<ul>
<li>play(): Plays media.</li>
<li>pause(): Pause media.</li>
<li>stop(): Stops media.</li>
<li>playPause(): Toggles play and pause.</li>
<li>seekTime(value, byPercent): Seeks to a specified time position. Param value must be an integer representing the target position in seconds or a percentage. By default seekTime seeks by seconds, if you want to seek by percentage just pass byPercent to true.</li>
<li>setVolume(volume): Sets volume. Param volume must be a float number with a value between 0 and 1.</li>
<li>setPlayback(playback): Sets playback. Param plaback must be a float number with a value between 0 and 2.</li>
<li>setState(state): Sets a new state. Param state mus be an string with &#39;play&#39;, &#39;pause&#39; or &#39;stop&#39;. This method only changes the state of the player, but doesn&#39;t plays, pauses or stops the media file.</li>
<li>toggleFullScreen(): Toggles between fullscreen and normal mode.</li>
<li>updateTheme(css-url): Removes previous CSS theme and sets a new one.</li>
<li>clearMedia(): Cleans the current media file.</li>
<li>changeSource(array): Updates current media source. Param <code>array</code> must be an array of media source objects.
A media source is an object with two properties <code>src</code> and <code>type</code>. The <code>src</code> property must contains a trustful url resource.
<pre class="prettyprint linenums">{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"}</pre></li>
</ul>
<p>Properties</p>
<ul>
<li>config: String with a url to JSON config file.</li>
<li>isReady: Boolean value with current player initialization state.</li>
<li>isBuffering: Boolean value to know if player is buffering media.</li>
<li>isCompleted: Boolean value to know if current media file has been completed.</li>
<li>isLive: Boolean value to know if current media file is a Live Streaming.</li>
<li>playsInline: Boolean value to know if Videogular is using inline playing or not.</li>
<li>nativeFullscreen: Boolean value to know if Videogular if fullscreen mode will use native mode or emulated mode.</li>
<li>mediaElement: Reference to video/audio object.</li>
<li>videogularElement: Reference to videogular tag.</li>
<li>sources: Array with current sources.</li>
<li>tracks: Array with current tracks.</li>
<li><p>cuePoints: Object containing a list of timelines with cue points. Each property in the object represents a timeline, which is an Array of objects with the next definition:
<pre class="prettyprint linenums">{
   timeLapse:{
     start: 0,
     end: 10
   },
   onEnter: callback(currentTime, timeLapse, params),
   onLeave: callback(currentTime, timeLapse, params),
   onUpdate: callback(currentTime, timeLapse, params),
   onComplete: callback(currentTime, timeLapse, params),
   params: {
     // Custom object with desired structure and data
   }
}</pre>
<ul>
<li><strong>timeLapse:</strong> Object with start and end properties to define in seconds when this timeline is active.\n</li>
<li><strong>onEnter:</strong> Callback function that will be called when progress reaches a cue point or being outside a cue point user seeks to a cue point manually.</li>
<li><strong>onLeave:</strong> Callback function that will be called when user seeks and the new time doesn&#39;t reach to the timeLapse.start property.</li>
<li><strong>onUpdate:</strong> Callback function that will be called when the progress is in the middle of timeLapse.start and timeLapse.end.</li>
<li><strong>onComplete:</strong> Callback function that will be called when the progress is bigger than timeLapse.end.</li>
<li><strong>params:</strong> Custom object with data to pass to the callbacks.</li>
</ul>
</li>
<li><p>isFullScreen: Boolean value to know if we’re in fullscreen mode.</p>
</li>
<li>currentState: String value with “play”, “pause” or “stop”.</li>
<li>currentTime: Number value with current media time progress.</li>
<li>totalTime: Number value with total media time.</li>
<li>timeLeft: Number value with current media time left.</li>
<li>volume: Number value with current volume between 0 and 1.</li>
<li>playback: Number value with current playback between 0 and 2.</li>
<li>bufferEnd: Number value with latest buffer point in milliseconds.</li>
<li>buffered: Array of TimeRanges objects that represents current buffer state.</li>
</ul>
</div></div>
</div>
